<template>
  <div class="cc-box">
    <div class="gui-padding bgf">
      <div class="mb15">
        <a-breadcrumb>
          <a-breadcrumb-item>公司管理</a-breadcrumb-item>
          <a-breadcrumb-item>船舶信息</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div class="mb10">
        <a-layout>
          <a-layout>
            <a-layout-sider :style="siderStyle">
              <div class="flex justify-content-between align-center">
                <a-button type="primary" class="flex1 mr15" @click="handleAddOpen">
                  <PlusOutlined/>
                  新增
                </a-button>
                <span class="c333">船舶数量：{{ total || 0 }} 艘 </span>
              </div>
              <div class="mt20 flex justify-content-between">
                <a-input placeholder="请根据船舶名称、IMO、识别号..." v-model:value="queryParams.keyword" class="mr10"></a-input>
                <a-button type="primary" @click="handleSearch"><SearchOutlined/>搜索</a-button>
              </div>
              <div class="mt20">
                <a-list item-layout="horizontal"  :data-source="tableData" bordered class="kk-item-list">
                  <template #renderItem="{ item,index }">
                    <a-list-item class="pr pointer" :class="[currentIndex == index?'active':0]" @click="handleChangeItem(item,index)">
                      <img src="/public/imgs/mark.svg" v-if="currentIndex == index"
                           style="position: absolute;right:0;bottom:-24px;width: 24px">
                      <a-list-item-meta>
                        <template #title>
                          <a href="javascript:void(0);">{{ item.zhongWenMing }}</a>
                        </template>
                        <template #description>
                          {{ item.leiXing }} | {{ item.zongDun }}
                        </template>
                        <template #avatar>
                          <a-avatar
                              src="/imgs/chuanbo.png"/>
                        </template>
                      </a-list-item-meta>
                    </a-list-item>
                  </template>
                </a-list>
              </div>
            </a-layout-sider>
            <a-layout-content v-show=" total > 0" :style="contentStyle">
              <div class="gui-padding-l ml30" style="background:#fafafa;border-radius: 12px;">
                <a-tabs v-model:activeKey="activeKey" type="card">
                  <a-tab-pane key="1" tab="基本信息">
                    <a-row :gutter="16">
                      <a-col class="gutter-row" :span="6">
                        <div class="gutter-box"><span class="mr6 c000 fw">船舶类型：</span><span class="c666">{{ currentItem.leiXing }}</span></div>
                        <div class="gutter-box"><span class="mr6 c000 fw">船舶IMO号：</span><span class="c666">{{ currentItem.imo }}</span></div>
                        <div class="gutter-box"><span class="mr6 c000 fw">船舶识别号：</span><span class="c666">{{ currentItem.shiBieHao }}</span></div>
                        <div class="gutter-box"><span class="mr6 c000 fw">船舶英文名：</span><span class="c666">{{ currentItem.yingWenMing }}</span></div>
                        <div class="gutter-box"><span class="mr6 c000 fw">船舶功率：</span><span class="c666">{{ currentItem.gongLv }}</span></div>
                        <div class="gutter-box"><span class="mr6 c000 fw">船舶主机型号：</span><span class="c666">{{ currentItem.zhuJiXingHao }}</span></div>
                        <div class="gutter-box"><span class="mr6 c000 fw">船舶电话：</span><span class="c666">{{ currentItem.dianHua }}</span></div>
                        <div class="gutter-box"><span class="mr6 c000 fw">船籍：</span><span class="c666">{{ currentItem.chuanJi }}</span></div>
                      </a-col>

                      <a-col class="gutter-row" :span="6">
                        <div class="gutter-box"><span class="mr6 c000 fw">船舶登记号：</span><span class="c666">{{ currentItem.dengJiHao }}</span></div>
                        <div class="gutter-box"><span class="mr6 c000 fw">船舶中文名：</span><span class="c666">{{ currentItem.zhongWenMing }}</span></div>
                        <div class="gutter-box"><span class="mr6 c000 fw">船舶总吨：</span><span class="c666">{{ currentItem.zongDun }} 吨</span></div>
                        <div class="gutter-box"><span class="mr6 c000 fw">所属公司：</span><span class="c666">{{ currentItem.suoShuGongSi }}</span></div>
                        <div class="gutter-box"><span class="mr6 c000 fw">船舶航区：</span><span class="c666">{{ currentItem.hangQu }}</span></div>
                        <div class="gutter-box"><span class="mr6 c000 fw">下船当天出勤(天)：</span><span class="c666">{{ currentItem.xiaChuanChuQin }} 天</span></div>
                        <div class="gutter-box"><span class="mr6 c000 fw">上船工作时间(天)：</span><span class="c666">{{ currentItem.shangChuanChuQin }} 天</span></div>
                      </a-col>
                    </a-row>
                  </a-tab-pane>
                </a-tabs>
                <a-divider></a-divider>
                <div>
                  <a-button type="primary" class="mr10" @click="handleEditOpen()"><EditOutlined/>编辑</a-button>
                  <a-button type="primary" class="mr10" @click="handleJobOpen(currentItem.id)" ghost><AppstoreAddOutlined />配置职位</a-button>
                  <a-popconfirm title="你确定删除吗?" @confirm="handleDelete(currentItem.id)">
                    <a-button type="primary"  danger> <template #icon><CloseOutlined
                        style="font-size:12px"/></template>删除</a-button>
                  </a-popconfirm>
                </div>
              </div>
            </a-layout-content>
          </a-layout>
        </a-layout>
      </div>
    </div>
    <add-information ref="addRef" @success="handleLoadDataEdit"></add-information>
    <add-job ref="addJobRef" @success="handleLoadData"></add-job>
  </div>
</template>
<script setup>
import AddInformation from "./compoments/AddInformation.vue";
import AddJob from "./compoments/AddJob.vue";

const addRef = ref(null)
const addJobRef = ref(null)
const currentIndex = ref(0)
const total = ref(0)
const tableData = ref([]);
const currentItem = ref({})
const queryParams = reactive({
  pageNo: 1,
  pageSize: 500,
  keyword: ''
})

const contentStyle = {
  background: '#fff'
}

const siderStyle = {
  color: '#fff',
}

// 添加
const handleAddOpen = () => {
  addRef.value.handleOpen()
}

// 编辑
const handleEditOpen = () => {
  addRef.value.handleOpen({...currentItem.value})
}

const handleJobOpen = (id) => {
  addJobRef.value.handleOpen(id)
}

// 改变选项
const handleChangeItem = (record,index) => {
  if(currentIndex.value == index)return
  currentIndex.value = index
  currentItem.value = record
}

// 查询
const handleLoadData = async () => {
  const resp = await useLoadChuanBoXinXiApi(queryParams)
  tableData.value = resp.data.records
  total.value = resp.data.total
  if (tableData.value && tableData.value.length > 0) {
    currentItem.value = resp.data.records[0]
  }
}

// 回调查询
const handleLoadDataEdit = (flag,record) => {
  if(flag){
    handleLoadData()
  }else{
    currentItem.value = record
  }
}

// 搜索
const handleSearch = () => {
  queryParams.pageNo = 1
  handleLoadData()
}


/**
 * 删除
 */
const handleDelete = async (id) => {
  try {
    await useDelChuanBoXinXiApi(id)
    notification.destroy()
    notification.success({
      "message": "提示",
      "description": "删除成功"
    })
    handleLoadData()
  }catch (e){
    useMessage().error(e.msg)
  }

}

onMounted(() => {
  handleLoadData()
})

</script>
<style lang="scss">
.cc-box {
  .ant-layout-sider {
    min-width: 320px !important;
  }

  .kk-item-list {
    height: calc(100vh - 235px);
    overflow: auto;

    .active {
      background: #e9f5ff;
    }
  }

  .gutter-box {
    margin-bottom: 6px;
  }
}

</style>

